<template>
    <!-- 编辑设计器 -->
    <div class="design-editor">
        <div class="report-editor">
            <draggable class="draggable"
                v-model="reportData.elementItems"
                group="paper"
                ghostClass="ghost"
                handle=".drag-widget"
                animation="200"
                @add="handleLayoutAdd"
                @end="handleMoveEnd">
                <transition-group name="fade" tag="div" class="design-report-item">
                    <template v-for="(element, index) in reportData.elementItems">
                        <component v-if="element.id" :is="element.designComponentName"
                            :key="index"
                            :index="index"
                            :element="element"
                            :selectItem.sync="selectItem_sync"
                            :parentElement="reportData"
                            :Api="reportData.Api"></component>
                    </template>
                </transition-group>
            </draggable>
        </div>
    </div>
</template>

<script>
import draggable from 'vuedraggable';
import { DesignPaper } from "./components/index";
import { getUUID } from "@/utils/index";
import * as _ from 'lodash';
export default {
    name: "DesignEditor",
    props: {
        reportData: { // 设计器数据
            type: Object,
            required: true
        },
        selectItem: { // 当前选择的元素
            type: Object
        }
    },
    components: {
        draggable,
        DesignPaper
    },
    data() {
        return {
            selectItem_sync: this.selectItem, // 用于传送父组件数据交互
            elementItems: [
                {
                    label: "A4纸", // 组件label
                    type: "paper_A4", // 类型
                    icon: "el-icon-tickets", // 图标
                    designComponentName: "DesignPaper", // 配置编辑组件命名
                    propComponentName: "PropParperA4", // 配置属性组件命名
                    renderComponentName: "RenderPaper", // 配置预览、渲染、打印组件
                    options: { // 组件配置
                        paddingTop: 0, // 上边距
                        paddingLeft: 0, // 左边距
                        paddingRight: 0, // 右边距
                        paddingBottom: 0, // 下边距
                        layout: "column", // 布局 横向row/纵向column
                        isPage: false, // 是否展示页码
                        pagePosition: "right", // 页码位置
                        watermark: false, // 水印
                        designWidth: 210, // 设计编辑时宽度
                        designHeight: 297, // 设计编辑时高度
                        dataShow: false, // 无数据时隐藏整个A4纸
                        dataShowField: "" // 关联字段
                    }
                }
            ]
        }
    },
    methods: {
        editorInit() {
            // 编辑器加载后，默认一张A4纸张数据渲染
            this.reportData.elementItems.length = 0;
            this.reportData.elementItems.push({
                id: getUUID(),
                ...this.elementItems[0],
                elementItems: []
            })
            // 选中第一张A4纸
            this.selectItem_sync = this.reportData.elementItems[0];
        },
        handleLayoutAdd(e) {
            const newIndex = e.newIndex;
            let data = _.cloneDeep(this.reportData.elementItems[newIndex]);
            this.$set(this.reportData.elementItems, newIndex, {
                id: getUUID(),
                ...data,
                elementItems: []
            })
        },
        handleMoveEnd() {}
    },
    mounted() {
        if (!this.$route.query.id) this.editorInit();
    },
    watch: {
        selectItem(val) {
            this.selectItem_sync = val;
        },
        selectItem_sync: {
            handler(val) {
                this.$emit('update:selectItem', val);
            },
            deep: true
        }
    }
}
</script>

<style>
    @import url('./DesignEditor.css');
</style>